<!-- 首页 -->
<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <Search></Search>
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <van-image width="100%" height="200px" :src="item.url" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="listbox">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-row>
            <van-col span="12" v-for="item in productList">
              <van-card
                :key="item.id"
                :price="item.price"
                :desc="item.shop"
                :title="item.shop"
                :thumb="item.picture"
                @click="onDetail(item.id)"
              >
                <template #footer>
                  <van-button round color="#ee0a24" size="mini"
                    >加入购物车</van-button
                  >
                </template>
              </van-card>
            </van-col>
          </van-row>
        </van-list>
      </div>
      <div class="tabber">
        <van-tabbar v-model="active" active-color="#ee0a24">
          <van-tabbar-item replace to="/home" icon="home-o"
            >首页</van-tabbar-item
          >
          <van-tabbar-item replace to="/category/list" icon="search"
            >列表</van-tabbar-item
          >
          <van-tabbar-item replace to="/cart" icon="friends-o"
            >购物车</van-tabbar-item
          >
          <van-tabbar-item replace to="/my" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { useBanner, useProductList ,useProductDetail} from "@/hook/home";
import Search from "../Search.vue";
import { ref } from "vue";

const active = ref(0);
const { bannerList } = useBanner();
const { onRefresh, onLoad, refreshing, loading, finished, productList } =
  useProductList();
const {onDetail} = useProductDetail()

</script>

<style lang="scss" scoped>
.my-swipe {
  width: 97%;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 40px;

  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
}

.listbox {
  position: relative;
  bottom: 40px;

  .van-card {
    border: 1px solid rgba(128, 128, 128, 0.399);
    margin: 1px 5px;
  }
}
</style>
